<template>
    <div class="container" @click="click">
        <slot :topNews="topNews">默认插槽的默认内容</slot>
        <slot name="novels" :topNovels="topNovels">具名插槽的默认内容</slot>
        <Child :content="childContent"></Child>
    </div>

</template>

<script setup>
    import Child from './Child.vue';
    import { reactive, ref } from 'vue';
    const childContent = ref('Parent是App的子组件, Child是Parent的子组件')
    let topNews = reactive([
        {
            no: 1,
            content: '赵心童世锦赛夺冠奖金有多少',
        },
        {
            no: 2,
            content: '中俄元首相约胜利日阅兵有何用意',
        },
        {
            no: 3,
            content: '出行热、消费旺、体验新',
        },
        {
            no: 4,
            content: '疯狂小杨哥现身王晶70岁生日会',
        },
        {
            no: 5,
            content: '台退将谈歼-16与美军机缠斗近50分钟',
        },
    ])
    let topNovels = reactive([
        {
            no: 1,
            content: '牧神记',
        },
        {
            no: 2,
            content: '吞噬星空',
        },
        {
            no: 3,
            content: '全家偷听我心声杀疯了,我负责吃奶',
        },
        {
            no: 4,
            content: '盖世神医',
        },
        {
            no: 5,
            content: '太荒吞天诀',
        },
    ])
</script>
<style scoped></style>